<template>
  <!--  普通商品结果展示  -->
  <div class="shop_items">
    <topbar/>
    <shopItemsTopbar/>

    <div class="shop_items_box">
      <div class="shop_items_box_mid">
        <div class="shop_items_box_mid_img">
          <div class="shop_items_box_mid_img_box">
            <el-carousel trigger="click" height="420px">
              <el-carousel-item v-for="item in 4" :key="item">
                <img :src="test_img">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="shop_items_box_mid_img_box_item">
            <div class="shop_items_box_mid_img_item" v-for="i in 6">
              <img :src="test_img">
            </div>
          </div>
          <div class="shop_items_like_box">
            <div class="shop_items_like">
              <img src="@/assets/images/shop_items/likes.png"/>
              收藏商品
            </div>
            <div class="shop_items_report">
              <router-link to="/">举报</router-link>
            </div>
          </div>
        </div>
        <div class="shop_items_box_mid_choice">
          <div class="shop_items_box_mid_choice_mid">
            <div class="shop_items_box_mid_choice_title">
              <a href="#">可减800元24期免息送碎屏宝Huawei/华为 Mate 40 pro
                5G手机新款官方旗舰店官网正品mate50直降mate40鸿蒙p50可减800元24期免息送碎屏宝Huawei/华为 Mate 40 pro
                5G手机新款官方旗舰店官网正品mate50直降mate40鸿蒙p50</a>
            </div>
            <div class="shop_items_box_mid_choice_title_mini">正品24期免息</div>
            <div class="shop_items_box_mid_choice_price_box">
              <div class="shop_items_box_mid_choice_price">
                <div class="shop_items_box_mid_choice_item_lable">价格</div>
                <i>￥</i><span>5600.00</span>
              </div>
            </div>
            <div class="shop_items_box_mid_choice_item_box">
              <div class="shop_items_box_mid_choice_item_lable">运费</div>
              <div class="shop_items_box_mid_choice_item_value">广东深圳至 天水秦州区 大城街道 快递: 0.00</div>
            </div>

            <div class="shop_items_box_mid_choice_item_box items" v-for="(item,item_index) in shop_chouice"
                 :key="item_index">
              <div class="shop_items_box_mid_choice_item_lable">{{ item.key_title }}</div>
              <div class="shop_items_box_mid_choice_item_value">
                <div
                  :class="[child_item_index==item.chech_index ? 'shop_items_box_mid_choice_item_values shop_items_checked' : 'shop_items_box_mid_choice_item_values'] "
                  @click="check_item(item_index,child_item_index)"
                  v-for="(child_item,child_item_index) in item.key_items" :key="child_item_index">
                  {{ child_item.value }}
                </div>
              </div>
            </div>

            <div class="shop_items_box_mid_choice_item_box">
              <div class="shop_items_box_mid_choice_item_lable">数量</div>
              <div class="shop_items_box_mid_choice_item_value">
                <el-input-number size="small" :min=1 :max="max"
                                 controls-position="right" v-model="shop_num">
                </el-input-number>
              </div>
            </div>

            <div class="shop_items_box_mid_choice_item_box shop_items_btn">
              <div class="shop_items_box_mid_choice_item_box_btn shop_items_add_cart" @click="add_cart">加入购物车</div>
              <div class="shop_items_box_mid_choice_item_box_btn shop_items_buy">立即购买</div>
            </div>

          </div>
        </div>
      </div>

      <div class="shop_items_info">
        <div class="shop_items_info_shop">
          <div class="shop_items_info_shop_box">
            <div class="shop_items_info_shop_box_title">小白自营旗舰店</div>
            <div class="shop_items_info_shop_box_content">
              <button class="shop_items_info_shop_box_content_btn">
                <router-link :to="{path:'shop',query:{id:1}}">
                  进店逛逛
                </router-link>
              </button>
              <button class="shop_items_info_shop_box_content_btn second_btn">收藏店铺</button>
            </div>
          </div>
          <div class="shop_items_info_shop_box"></div>
        </div>
        <div class="shop_items_info_box">
          <div class="shop_items_info_box_nav">
            <div @click="nav_click(index)"
                 :class="[index==this_nav_index ? 'shop_items_info_box_nav_item shop_items_nav_items_active' : 'shop_items_info_box_nav_item']"
                 v-for="(nav,index) in shop_items_arr" :key="index">
              {{ nav }}
            </div>
          </div>
          <div class="shop_items_info_item" v-if="this_nav_index==0">
            <img src="https://gdp.alicdn.com/imgextra/i3/2024314280/O1CN01ThfpvW1hUHpgSYs0r_!!2024314280.jpg">
            <img src="https://img.alicdn.com/imgextra/i1/2024314280/O1CN01DzffWC1hUHt9RgVWB_!!2024314280.jpg">
            <img src="https://img.alicdn.com/imgextra/i3/2024314280/O1CN01qsxMuV1hUHsj7ldKb_!!2024314280.jpg">
          </div>
          <div class="shop_items_info_item" v-if="this_nav_index==1">
            <div class="shop_items_info_item_parameter">
              <div class="shop_items_info_item_parameter_title">
                规格参数
              </div>
              <div class="shop_items_info_item_parameter_item" v-for="data in 5">
                <div class="shop_items_info_item_parameter_item_title">
                  拍摄
                </div>
                <div class="shop_items_info_item_parameter_item_content">
                  <div class="shop_items_info_item_parameter_item_content_row">前置摄像头</div>
                  <div class="shop_items_info_item_parameter_item_content_row row_content">1080*1920</div>
                </div>
              </div>
            </div>

          </div>
          <div class="shop_items_info_item" v-if="this_nav_index==2" v-for="data in 2">
            <div class="shop_items_info_item_evaluate">
              <div class="shop_items_info_item_evaluate_title">
                <img src="@/assets/images/logo/xiaobaishop_1.jpg"/>
                <div class="shop_items_info_item_evaluate_title_name">
                  猛踹瘸子那条好腿
                </div>
                <el-rate
                  v-model="start"
                  disabled
                  show-score
                  text-color="#ff9900"
                  class="er_start_shop"
                  score-template="{value}">
                </el-rate>
              </div>
              <div class="shop_items_info_item_evaluate_title_text">
                此用户没有填写任何评价
              </div>
              <div class="shop_items_info_item_evaluate_title_imgs">
                <img src="@/assets/images/logo/xiaobaishop_1.jpg" v-for="data in 9"/>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <bottom/>
  </div>
</template>

<script>
import topbar from "@/components/topbar";
import shopItemsTopbar from "@/components/shop_items/shop_items_topbar.vue";
import bottom from "@/components/bottom";

export default {
  name: "shop_items",
  data() {
    return {
      start: 5,
      max: 10,
      shop_num: 1,
      this_nav_index: 0,
      shop_items_arr: [
        "商品详情",
        "规格参数",
        "评价"
      ],
      shop_chouice: [
        {
          key_title: '网络类型',
          chech_index: -1,
          key_items: [
            {
              id: 1,
              check: false,
              value: '4G全网通'
            }, {
              id: 2,
              check: false,
              value: '5G全网通'
            }
          ]
        }, {
          key_title: '机身颜色',
          chech_index: -1,
          key_items: [
            {
              id: 1,
              check: false,
              value: 'HUAWEI Mate 40 Pro 亮白色'
            }, {
              id: 1,
              check: false,
              value: 'HUAWEI Mate 40 Pro 亮白色'
            }, {
              id: 1,
              check: false,
              value: 'HUAWEI Mate 40 Pro 亮白色'
            }, {
              id: 1,
              check: false,
              value: 'HUAWEI Mate 40 Pro 亮白色'
            }, {
              id: 1,
              check: false,
              value: 'HUAWEI Mate 40 Pro 亮白色'
            }, {
              id: 1,
              check: false,
              value: 'HUAWEI Mate 40 Pro 亮白色'
            }, {
              id: 1,
              check: false,
              value: 'HUAWEI Mate 40 Pro 亮白色'
            }, {
              id: 1,
              check: false,
              value: 'HUAWEI Mate 40 Pro 亮白色'
            },
          ]
        }, {
          key_title: '存储容量',
          chech_index: -1,
          key_items: [
            {
              id: 1,
              check: false,
              value: '8GB+128GB'
            }, {
              id: 2,
              check: false,
              value: '6GB+128GB'
            }, {
              id: 2,
              check: false,
              value: '6GB+265GB'
            }, {
              id: 2,
              check: false,
              value: '8GB+265GB'
            }, {
              id: 2,
              check: false,
              value: '8GB+512GB'
            }, {
              id: 2,
              check: false,
              value: '8GB+265GB'
            }, {
              id: 2,
              check: false,
              value: '8GB+512GB'
            }, {
              id: 2,
              check: false,
              value: '8GB+265GB'
            }, {
              id: 2,
              check: false,
              value: '8GB+512GB'
            }, {
              id: 2,
              check: false,
              value: '8GB+265GB'
            }, {
              id: 2,
              check: false,
              value: '8GB+512GB'
            }, {
              id: 2,
              check: false,
              value: '8GB+265GB'
            }, {
              id: 2,
              check: false,
              value: '8GB+512GB'
            }
          ]
        }
      ],
      id: '7777888',
      test_img: 'https://img.alicdn.com/imgextra/i1/2024314280/O1CN018TL5dN1hUHrO3mcqq_!!2024314280.jpg_430x430q90.jpg'
    }
  },
  methods: {
    nav_click(index) {
      this.this_nav_index = index
    },
    add_cart() {
      this.$router.push('/shopcar')
    },
    check_item(fIndex, cIndex) {
      this.shop_chouice[fIndex].chech_index = cIndex
    }
  },
  components: {
    topbar,
    shopItemsTopbar,
    bottom
  },
  created() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
    this.id = this.$route.query.id
    console.log(this)
  },
  watch: {
    $route() {
      this.id = this.$route.query.id
    },
  }
}
</script>

<style scoped>
.el-rate__text {
  position: relative !important;
  top: 2px;
}

.er_start_shop {
  position: relative;
  top: 14px;
  left: 10px;
}

.shop_items_info_item_evaluate_title_imgs img {
  width: 100px !important;
  height: 100px;
  margin: 5px 5px;
  border-radius: 5px;
}

.shop_items_info_item_evaluate_title_imgs {
  width: 100%;
  height: auto;
  max-height: 240px;
  padding-bottom: 10px;
  display: flex;
  flex-wrap: wrap;

}

.shop_items_info_item_evaluate_title_text {
  width: 100%;
  height: auto;
  font-size: 12px;
  color: #442f1a;
  max-height: 100px;
  margin: 5px 0px 5px 0px;
}

.shop_items_info_item_evaluate_title img {
  width: 40px !important;
  height: 40px;
  margin: 5px 5px;
  border-radius: 50%;
}

.shop_items_info_item_evaluate_title_name {
  width: auto;
  padding-left: 10px;
  line-height: 50px;
  font-size: 14px;
  color: #442f1a;
}

.shop_items_info_item_evaluate_title {
  width: 100%;
  height: 50px;
  display: flex;
  flex-wrap: nowrap;
}

.shop_items_info_item_evaluate {
  width: calc(100% - 20px);
  margin: 10px auto;
  height: auto;
}

.row_content {
  width: calc(100% - 260px) !important;
  margin-left: 30px;
  color: #442f1a !important;
  border-right: unset !important;
  text-align: left !important;
}

.shop_items_info_item_parameter_item_content_row {
  width: 230px;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  color: #958a7e;
  font-weight: bold;
  text-align: right;
  padding-right: 30px;
  border-right: 1px solid #958a7e;
}

.shop_items_info_item_parameter_item_content {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-bottom: 1px solid #958a7e;
}

.shop_items_info_item_parameter_item_title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-indent: 40px;
  font-size: 12px;
  font-weight: bold;
  color: #442f1a;
  border-bottom: 1px solid #958a7e;
}

.shop_items_info_item_parameter_item {
  width: 100%;
  height: auto;
}

.shop_items_info_item_parameter_title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-indent: 20px;
  font-size: 12px;
  color: #958a7e;
  font-weight: bold;
  border-bottom: 1px solid #958a7e;
}

.shop_items_info_item_parameter {
  width: 100%;
  height: auto;
  padding-bottom: 10px;
}

.shop_items_nav_items_active {
  color: #ff4400 !important;
}

.second_btn {
  background-color: #E4E7ED !important;
  border: 1px solid #442f1a !important;
  color: #442f1a !important;
}

.shop_items_info_shop_box_content_btn a{
  color: #E4E7ED;
}
.shop_items_info_shop_box_content_btn {
  width: 100px;
  text-align: center;
  line-height: 30px;
  height: 30px;
  font-size: 12px;
  font-family: "新宋体", serif;
  border: unset;
  position: relative;
  top: 20px;
  background-color: #442f1a;
  cursor: pointer;
}

.shop_items_info_shop_box_content {
  width: 100%;
  height: 80px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.shop_items_info_shop_box_title {
  width: calc(100% - 20px);
  height: 40px;
  padding-left: 20px;
  line-height: 40px;
  font-size: 14px;
  border-bottom: 1px solid #442f1a;
}

.shop_items_report a:hover {
  text-decoration: underline;
}

.shop_items_report a {
  width: auto;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  text-align: right;
  color: #958a7e;
}

.shop_items_like img {
  width: 20px;
  height: 20px;
  position: relative;
  top: 5px;
  left: 5px;
  margin-right: 10px;
}

.shop_items_like {
  width: auto;
  cursor: pointer;
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
  text-align: left;
  font-size: 12px;
  color: #958a7e;
}

.shop_items_like_box {
  width: 100%;
  height: 30px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.shop_items_info_shop_box {
  width: 100%;
  height: auto;
  background-color: #E4E7ED;
  margin-bottom: 10px;
  border-radius: 5px;
}

.shop_items_info_item img {
  width: 100%;
  /*margin-top: -10px;*/
}

.shop_items_info_item {
  width: 100%;
  height: auto;
  border-radius: 5px;
  background-color: #E4E7ED;
  margin-top: 10px;
}

.shop_items_info_box_nav_item:hover {
  color: #ff4400;
}

.shop_items_info_box_nav_item {
  width: auto;
  height: 50px;
  margin-right: 5px;
  padding: 0px 10px 0px 10px;
  background-color: #E4E7ED;
  display: inline-table;
  line-height: 50px;
  font-size: 12px;
  text-align: center;
  border-radius: 5px;
  color: #442f1a;
  cursor: pointer;
}

.shop_items_info_box_nav {
  width: 100%;
  height: 50px;
  border-radius: 5px;
  background-color: #E4E7ED;
}

.shop_items_info_box {
  width: calc(100% - 310px);
  height: auto;
  margin-left: 10px;
}

.shop_items_info_shop {
  width: 300px;
  height: auto;
  /*background-color: #E4E7ED;*/
}

.shop_items_info {
  width: 1200px;
  height: auto;
  margin: 100px auto;
  display: flex;
  flex-wrap: nowrap;
}

.shop_items_buy {
  color: #ff4400;
}

.shop_items_add_cart {
  background-color: #ff4400;
  color: #ffffff;
  border: 1px solid #ff4400;
}

.shop_items_btn {
  border: unset !important;
}

.shop_items_box_mid_choice_item_box_btn {
  width: 150px;
  height: 40px;
  border-radius: 5px;
  margin-right: 10px;
  line-height: 40px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  border: 1px solid #ff4400;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}

.shop_items_box_mid_choice_price span {
  color: #ff4400;
  font-weight: bold;
  font-size: 28px;
  line-height: 50px;
}

.shop_items_box_mid_choice_price i {
  font-size: 14px;
  font-style: unset;
  color: #ff4400;
  line-height: 50px;
}

.shop_items_box_mid_choice_price {
  width: 100%;
  height: 50px;
  display: flex;
  flex-wrap: nowrap;
}

.shop_items_box_mid_choice_price_box {
  width: 100%;
  height: 50px;
  background-image: url("@/assets/images/shop_items/price_back.png");
  background-size: cover;
}

.shop_items_checked {
  border: 1px solid #ff4400 !important;
  color: #ff4400 !important;
}

.shop_items_box_mid_choice_item_values:hover {
  border: 1px solid #ff4400;
}

.shop_items_box_mid_choice_item_values {
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
  display: inline-table;
  color: #442f1a;
  border-radius: 5px;
  text-align: center;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
  margin-right: 10px;
  cursor: pointer;
  border: 1px solid #442f1a;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.shop_items_box_mid_choice_item_value {
  width: calc(100% - 80px);
  height: auto;
  line-height: 50px;
  font-size: 14px;
  margin-left: 10px;
}

.shop_items_box_mid_choice_item_lable {
  width: calc(80px - 20px);
  height: 50px;
  font-size: 12px;
  line-height: 50px;
  padding-left: 20px;
  color: #958a7e;
}

.shop_items_box_mid_choice_item_box {
  width: 100%;
  height: auto;
  margin: 10px 0px 10px 0px;
  display: flex;
  flex-wrap: nowrap;
  border-bottom: 1px dotted #958a7e;
}

.shop_items_box_mid_choice_title_mini {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  text-align: left;
  color: #ff4400;
}

.shop_items_box_mid_choice_title a:hover {
  color: #442f1a;
  text-decoration: underline;
}

.shop_items_box_mid_choice_title a {
  color: #000000;
}

.shop_items_box_mid_choice_title {
  width: 100%;
  height: 50px;
  line-height: 25px;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  overflow: hidden;
}

.shop_items_box_mid_choice_mid {
  width: calc(100% - 10px);
  margin-left: 10px;
  height: auto;
}

.shop_items_box_mid_choice {
  width: calc(100% - 420px);
  height: auto;
  float: right;
}

.shop_items_box_mid_img_item img {
  width: 50px;
  height: 50px;
  position: relative;
  top: 5px;
  left: 5px;
}

.shop_items_box_mid_img_item {
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border: 1px solid #E4E7ED;
  cursor: pointer;
  border-radius: 5px;
}

.shop_items_box_mid_img_item:hover {
  border: 1px solid #442f1a;
}

.shop_items_box_mid_img_box img {
  width: 100%;
  height: 100%;
}

.shop_items_box_mid_img_box_item {
  width: 100%;
  height: 60px;
  margin: 10px 0px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.shop_items_box_mid_img_box {
  width: 420px;
  height: 420px;
}

.shop_items_box_mid_img {
  width: 420px;
  height: auto;
}

.shop_items_box_mid {
  width: 1200px;
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
}

.shop_items_box {
  width: 100%;
  height: auto;
  margin: 10px 0px;
}

.shop_items {
  width: 100%;
  height: 100%;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
